import { filterEcharts, getStructure } from "api"
import { useEffect, useState, useRef } from "react"
import * as echarts from 'echarts'
import { Modal, Form, Button, Select, Cascader } from 'antd';
// import axios from "axios"
const { Option } = Select;

export default function Home() {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [work_xueli, setwork_xueli] = useState("")
    const [work_biye_time, setwork_biye_time] = useState("")
    const [structure, setstructure] = useState([])
    const [work_zhuanye, setwork_zhuanye] = useState([])
    const formRef = useRef()

    useEffect(() => {
        getdata()
    }, [])


    const getdata = async () => {

        // 获取院校结构
        let strucs = await getStructure()
        // console.log(strucs.data[0].institutionalStructure)
        if (strucs.code - 0 === 200) {
            setstructure(strucs.data[0].institutionalStructure)
        }
        let data = await filterEcharts({
            work_biye_time, work_xueli, work_zhuanye
        })

        initEcharts(data.data)
    }

    const initEcharts = (datas) => {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('forms'));
        // 绘制图表
        myChart.setOption({
            title: {
                text: '就业升学一览'
            },

            tooltip: {
                trigger: "axis",
            },
            legend: {
                data: ["就业", "灵活就业", "待就业", "升学"],
            },
            grid: {
                left: "6%",
                right: "3%",
                bottom: "3%",
                containLabel: true,
            },
            toolbox: {
                show: true,
                orient: "vertical",
                left: "left",
                top: "center",
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ["line", "bar"] },
                    restore: { show: true },
                    saveAsImage: { show: true },
                },
            },
            xAxis: {
                type: "category",
                boundaryGap: false,
                data: ["2016", "2017", "2018", "2019", "2020"],
            },
            yAxis: {
                type: "value",
            },
            series: datas
        })
    }

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {

        setIsModalVisible(false);
        getdata()
    };

    const handleCancel = async () => {
        await registerVal()
        getdata()
        setIsModalVisible(false);
    };
    
    const registerVal = () => {
        return new Promise(res => {
            const form = formRef.current;
            form.resetFields();
            setwork_xueli("")
            setwork_biye_time("")
            setwork_zhuanye([])
            res("")
        })
    }

    const onFinish = (values) => {
        console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };





    return (
        <div className="echarts">

            <div id="forms" style={{ width: '700px', height: '450px' }}></div>
            <Button className="pos_button" type="primary" onClick={showModal}>
                进入筛选
            </Button>
            <Modal forceRender cancelText={"清空条件"} title="筛选条件" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <Form
                    ref={formRef}
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        label="请选择专业"
                        name="word_zhuanye"

                    >
                        <Cascader value={work_zhuanye} options={structure} onChange={val => setwork_zhuanye(val)} placeholder="请选择专业" />
                    </Form.Item>

                    <Form.Item
                        label="请选择学历"
                        name="work_xueli"
                    >
                        <Select value={work_xueli} onChange={val => { setwork_xueli(val) }}>
                            <Option value="本科">本科</Option>
                            <Option value="研究生">研究生</Option>
                            <Option value="博士">
                                博士
                            </Option>
                        </Select>
                    </Form.Item>

                    <Form.Item
                        label="请选择毕业时间"
                        name="work_biye_time"
                    >
                        <Select value={work_biye_time} onChange={val => { setwork_biye_time(val) }}>
                            <Option value="2020">2020</Option>
                            <Option value="2019">2019</Option>
                            <Option value="2018">2018</Option>
                            <Option value="2017">2017</Option>
                            <Option value="2016">2016</Option>

                        </Select>
                    </Form.Item>


                </Form>
            </Modal>
        </div>
    )
}